<template>
	<div>
		<mainTop></mainTop>
		<div class="hysyMiddleBox">
			<div class="tqhyPageHead">
				<ul @mouseleave="tqhyHeadHoverIndex = selectedTqhyHeadHover">
					<li :class="{'tqhyHeadHover':tqhyHeadHoverIndex==0||selectedTqhyHeadHover==0}" 
							@click="changeWeb(0)"
							@mouseover="tqhyHeadHoverIndex = 1">会议首页</li>
					<li :class="{'tqhyHeadHover':tqhyHeadHoverIndex==1||selectedTqhyHeadHover==1}" 
							@click="changeWeb(1)"
							@mouseover="tqhyHeadHoverIndex = 1">同期会议</li>
					<li :class="{'tqhyHeadHover':tqhyHeadHoverIndex==2||selectedTqhyHeadHover==2}" 
							@click="changeWeb(2)"
							@mouseover="tqhyHeadHoverIndex = 2">会议嘉宾</li>
					<li :class="{'tqhyHeadHover':tqhyHeadHoverIndex==3||selectedTqhyHeadHover==3}" 
							@click="changeWeb(3)"
							@mouseover="tqhyHeadHoverIndex = 3">视频回放</li>
				</ul>
			</div>
			<div>
				<div class="hytj" >
					<div style="width: 486px;height: 596px;display: inline-block;float: left;">
					<img :src="'https://zha.heavenk.com/prod-api'+this.suggest.rows[0].image" style="width: 100%;height: 100%;" alt="">
					</div>
					<div class="hytj_content" v-if="suggest.rows">
						<div style="margin-top: 60px;">
							<div style="font-size: 36px;font-weight: 600;font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;">会议推荐</div>
							<div style="font-size: 36px;font-weight: 600;margin-top: 5px;font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;">Recommend</div>
						</div>
						<div style="font-size: 16px;font-weight: 600;margin-top: 60px;height: 30px;">{{ this.suggest.rows[0].name }}</div>
						<div style="margin-top: 10px;font-size: 16px;line-height: 28px;overflow: hidden;height: 116px;
							font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;">
							{{ this.suggest.rows[0].intro }}
						</div>
						<div style="font-size: 17px;margin-top: 20px;line-height: 29px;">
							<div>特邀讲师：{{this.suggest.rows[0].guestName}}（{{this.suggest.rows[0].unit}}）</div>
							<div>直播时间：{{ this.suggest.rows[0].startTime }}</div>
						</div>
						<a @click="getQrCode(suggest.rows[0].qrCode)" style="color: #150e52;cursor:pointer;">
						<div style="position: absolute;bottom: 76px;width: 140px;cursor: pointer;
						height: 45px;line-height: 45px; border: 2px solid #150e52;font-size: 19px;
						padding-left: 17px;padding-right: 9px; font-weight: 600;letter-spacing: 2px;font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;">
							进入直播间<img src="../images/moreIcon.png" style="margin-left: 5px;margin-top: -3px;"/>
						</div>
						</a>
					</div>
				</div>
				<div class="zxhyTitle" >
				<div style="font-size: 36px;color: #150e52;font-weight: 600;">最新会议</div>
				<router-link 
					to="/tqhy"
					style="
							font-size: 16px; 
							text-decoration: none;
							display: inline-block;
							float: right;
							margin-right: 3px;
							line-height: 50px;
							height: 50px;
							font-weight: 550;
							color: #150e52;
							position: absolute;
							right: 2px;top: 0px;"
				>
					更多&nbsp;
				<img src="../images/moreico.png" width="9px" style="margin-top: -3px;margin-right: 0px;"/></router-link>
				</div>
				<div class="zxhyContent" v-if="newest.rows">
					<div class="zxhyModule" 
						v-for="(item,index) in newest.rows"
						:key="index"
					>
						<div style="width: 243px;height: 245px;float: left;"><img :src="'https://zha.heavenk.com/prod-api'+item.image" style="width: 100%;height: 100%;" alt=""></div>
						<div style="height: 220px; float: left;color: #150e52;width: 296px;margin-left: 10px;margin-top: 25px;position: relative;">
							<div style="font-size: 18px;font-weight: 600; height: 50px;overflow: hidden;width: 100%; 
							font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;">{{ item.name }}</div>
							<div style="font-size: 18px;
							font-family: Adobe 黑体 Std R;margin-top: 15px;">
							特邀讲师：{{item.guestName}}（{{item.unit}}）
							</div>
							<div style="position: absolute;bottom:12px;">
								<a @click="getQrCode(item.qrCode)" style="text-decoration: none;color: #150e52; cursor: pointer;">
								<div style="cursor: pointer;width: 105px;
								height: 40px;line-height: 40px; border: 2px solid #150e52;font-size: 19px;text-align: center;
								padding:0px 9px;font-weight: 600;font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;">
									{{ checkStatus[index] }}
								</div>
								<!-- <div style="font-size: 15px;width: 127px;text-align: center;margin-top: 8px;font-weight: 600;cursor: pointer;">
									视频回放
								</div> -->
								</a>
							</div>
							
						</div>
					</div>
				</div>
				<div class="hyjbTitle" >
				<div style="font-size: 36px;color: #150e52;font-weight: 600;">会议嘉宾</div>
				<router-link 
					to="/hyjb"
					style="text-decoration: none;font-size: 16px; display: inline-block;float: right;margin-right: 3px;
							line-height: 50px;height: 50px;font-weight: 550;color: #150e52;position: absolute;right: 2px;top: 0px;"
				>
				更多&nbsp;
				<img src="../images/moreico.png" width="9px" style="margin-top: -3px;margin-right: 0px;"/>
				</router-link >
				</div>
				<div class="hyjbContent">
					<div class="jbModule" 
						v-for="(item,index) in guest.rows"
						:key="index"
						>
						<div style="width: 243px;height: 243px;">
							<img :src="'https://zha.heavenk.com/prod-api'+item.photo" alt="" style="width: 100%;height: 100%;">
						</div>
						<div style="color: #150e52;font-size: 19px;text-align: center;line-height: 62px;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
							{{ item.name }}<span style="font-size: 15px;">（{{item.unit}}）</span>
						</div>
					</div>
					
					
				</div>
			</div>
		</div>
		<el-dialog
		  
		  :visible.sync="centerDialogVisible"
		  width="810px"
		
		  center>
		  <div class="dialogLeft" style="">
			  <!-- <img src="../images/dialogBg.png" style="width: 100%;height: 100%;" alt=""> -->
			  <div style="text-align: center;margin-top: 130px;">
				  <img src="../images/12.png" style="width: 60px;" alt="">
			  </div>
			  <div style="margin-left: 10px;margin-top: 60px;">
				  <img src="../images/diaText.png" alt="">
			  </div>
			  
			  </div>
			<div style="text-align: center;margin-top: 105px;">
				<img :src="this.QrCode" style="width: 190px;height: 190px;" alt="">
				<div style="font-size: 28px;color: #201b1b;margin-top: 20px;letter-spacing: 2px;">
					扫码 <div style="font-weight: 600;margin-top: -1px;margin: 0px 5px; display: inline-block;">—</div> 进入直播间
				</div>
			</div>
		 
		</el-dialog>
		<mainBottom></mainBottom>
	</div>
</template>

<script>
	import mainTop from '../components/mainTop.vue'
	import mainBottom from '../components/mainBottom.vue'
	import axios from 'axios';
	export default {
	  components: { 
		  mainTop,
		  mainBottom
	   },
	   data(){
		   return{
			   tqhyHeadHoverIndex:0,
			   selectedTqhyHeadHover:0,
			   suggest:'',
			   newest:'',
			   checkStatus:['视频回放','视频回放'],
			   guest:'',
			   centerDialogVisible: false,
			   QrCode:'',
			   
			   };
			},
		created(){
			this.getSuggest();
			this.getNewest();
			this.getGuest();
		},
		methods:{
			getQrCode(qrcode){
				this.centerDialogVisible=true
				this.QrCode='https://zha.heavenk.com/prod-api'+ qrcode
				
			},
			getSuggest(){
				axios.get('https://zha.heavenk.com/prod-api/web/meeting/meetingSynopsis').then((res)=>{
                    this.suggest=res.data
                })
			},
			getGuest(){
				axios.get('https://zha.heavenk.com/prod-api/web/guest/list',{
					params:{
						pageSize:8,
						pageNum:1,
					}
				}).then((res)=>{
                    this.guest=res.data
					// console.log(this.guest);
					
                })
			},
			getNewest(){
				let add=[]
				axios.get('https://zha.heavenk.com/prod-api/web/meeting/meetingList').then((res)=>{
                    this.newest=res.data
					if (this.newest.rows) {
						for (let index = 0; index < this.newest.rows.length; index++) {
							const nowdate = new Date();  
							nowdate = nowdate.getTime();
							const sdate = new Date(this.newest.rows[index].startTime);  
							sdate = sdate.getTime();
							const edate = new Date(this.newest.rows[index].endTime);  
							edate = edate.getTime();
							if(nowdate>sdate&&nowdate<edate){
								add.push('正在直播')
							}else if(nowdate<sdate){
								add.push('即将开播')
							}
							else{
								add.push('视频回放')
							}	
						}
					}
                })
				this.checkStatus=add
			},
			changeWeb(num){
				this.selectedTqhyHeadHover=0
				switch (num) {
					case 0:
						this.$router.push('/hysy')
						break;
					case 1:
						this.$router.push('/tqhy')
						break;
					case 2:
						this.$router.push('/hyjb')
						break;
					case 3:
						this.$router.push('/sphf')
						break;
					default:
						break;
				}

			}
		},
		}
</script>

<style>
	.hysyMiddleBox{
		width: 100%;
		min-width: 1700px;
		background-color: #f7f7f7;
	}
	.tqhyPageHead{
		width: 1140px;
		min-width: 1140px;
		height: 60px;
		margin: auto;
		margin-top: 33px;
	}
	.tqhyPageHead ul{
		list-style: none;
		text-align: center;
		height: 60px;
		width: 1140px;
	}
	.tqhyHeadHover{
		background-color: #150e52 !important;
		color: #fff !important;
	}
	.tqhyPageHead ul li:nth-child(-n+3){
		width: 195px;
		height: 50px;
		margin: auto;
		line-height: 50px;
		float: left;
		margin-right:114px;
		font-size: 22px;
		color: #150e52;
		font-weight: 600;
		text-align: center;
		border-radius: 30px;
		border: 2px solid #150e52;
	} 
	.tqhyPageHead ul li:nth-child(4){
		width: 195px;
		height: 50px;
		line-height: 50px;
		float: left;
		margin: auto;
		border-radius: 30px;
		border: 2px solid #150e52;
		font-size: 22px;
		color: #150e52;
		font-weight: 600;
		text-align: center;
	}
	.hytj{
		width: 1140px;
		min-width: 1140px;
		height: 596px;
		background-color: #fff;
		margin: auto;
		margin-top: 35px;
	}
	.hytj_content{
		width: 580px;
		height: 596px;
		display: inline-block;
		float: left;
		color: #150e52;
		padding-left: 50px;
		position: relative;
	}
	.zxhyTitle,.hyjbTitle{
		width: 1140px;
		position: relative;
		margin: auto;
		text-align: center;
		margin-top: 60px;
	}
	.zxhyContent{
		width: 1140px;
		min-width: 1140px;
		max-height: 520px;
		margin: auto;
		margin-top: 33px;
		overflow: hidden;
	}
	.zxhyModule:nth-child(odd){
		width: 560px;
		height: auto;
		display: inline-block;
		background-color: #fff;
		margin-right: 20px;
		margin-bottom: 18px;
	}
	.zxhyModule:nth-child(even){
		width: 560px;
		height: auto;
		display: inline-block;
		background-color: #fff;
		margin-bottom: 18px;
	}
	/* .zxhyModule:hover{
		transform: translateY(-10px);
		box-shadow: 0 26px 40px -24px rgb(0 36 100 / 50%);
	} */
	.jbModule:hover{
		transform: translateY(-10px);
		box-shadow: 0 26px 40px -24px rgb(0 36 100 / 50%);
	}
	.hyjbContent{
		width: 1140px;
		min-width: 1140px;
		max-height: 705px;
		/* background-color: #fff; */
		margin: auto;
		padding-top: 35px;
		overflow: hidden;
	}
	.jbModule:nth-child(4n){
		width: 243px;
		height: 315px;
		background-color: #fff;
		display: inline-block;
		margin-right: 0px !important;
		margin-bottom: 56px;
		/* margin-left: 3px; */
	}
	.jbModule{
		width: 243px;
		height: 315px;
		background-color: #fff;
		display: inline-block;
		margin-right: 56px;
		margin-bottom: 56px;
		transition: all .2s;
	}
</style>